<template>
    <div class="son">
        <h1>我是子组件：曹植</h1>

        <hr/>
        <p>{{props.info}}</p>
        <p>{{props.money}}</p>
        <p>{{props.msg}}</p>

        <hr/>
        <p>{{info}}</p>
        <p>{{money}}</p>
        <p>{{msg}}</p>

        <hr/>
        <!--验证props属性不可修改-->
        <button @click="updateProps">修改props数据</button>

    </div>
</template>

<script setup lang="ts">

  // 子组件使用defineProps方法去接收父组件传递过来的数据
  // defineProps是Vue3提供的方法，不需要引入也不需要定义，直接使用
  let props = defineProps(["info", "money", "msg"]); // defineProps方法里的参数可以数数组或者对象
  console.log(props);


  // 验证props属性不可修改-点击按钮回调
  const updateProps = () => {
    props.money += 10;
    alert("props属性不可修改=" + props.money);
  };
</script>

<style scoped>
    .son {
        width: 400px;
        height: 260px;
        background: hotpink;
    }
</style>